<script setup>
    import { sdCityList, getName, getIdCardNumber } from '@/utils/index'
    import { ElMessage } from 'element-plus'
    import Apply from './Apply.vue'

    
    const tabbarData = ['申请中', '受理中', '审核中', '审批中', '已拨付']
    let current = $ref(0)
    
    // 列表
    let resData = $ref([])

    // 总条数
    let totalCount = $ref(0)

    // 筛选
    let filterParams = $ref({
        pageNo: 1,
        pageSize: 20,
    })

    // 列表数据加载中
    let dataLoading = $ref(false)


    const getList = () => {
        dataLoading = true

        setTimeout(() => {
            dataLoading = false

            if(current == 0){
                resData = [
                { s1: '秦霞', s2: '370421********2223', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: '倪国晶', s2: '370421********0330', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: '贾真真', s2: '370421********1260', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                ]
            }else if(current == 1) {
                resData = [
                { s1: '尤春齐', s2: '370403********303X', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: '潘亦菲', s2: '370403********5609', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: '吕东东', s2: '370403********2651', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: '黄天赫', s2: '370403********3662', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                ]
            }else if(current == 2) {
                resData = [
                { s1: '任苒溪', s2: '370403********8682', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: '何文昊', s2: '370403********8383', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: '褚晨涛', s2: '370403********1552', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: '康添昊', s2: '370403********7639', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                ]
            }else if(current == 3) {
                resData = [
                { s1: '柏忠林', s2: '370403********450X', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: '齐添池', s2: '370403********5246', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: '云新建', s2: '370403********5553', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: '方晶莹', s2: '370403********8826', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                ]
            }else if(current == 4) {
                resData = [
                { s1: '郝汝鑫', s2: '370403********872X', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: '李忠林', s2: '370403********2635', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: '刘瑞辰', s2: '370403********0525', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: '张新建', s2: '370403********4796', s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                ]
            }else {
                resData = [
                { s1: getName(), s2: getIdCardNumber(), s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: getName(), s2: getIdCardNumber(), s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: getName(), s2: getIdCardNumber(), s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                { s1: getName(), s2: getIdCardNumber(), s3: '就业困难的失业人员',  s4: '新城街道办事处', s5: '社区网格员', s6: '2022-09', s7: '2022-01', s8: '2022-08', s9: '1', s10: '1900', s11: '637', s13: '刘铁柱', s14: '2022-11-25' },
                ]
            }
            totalCount = resData.length
        }, 300);
    }
    getList()

    // 分页
    const handleCurrentChange = (page) => {
        filterParams.pageNo = page
        getList()
    }

    const handleSizeChange = (size) => {
        filterParams.pageSize = size
        getList()
    }

    // 搜索
    const hadleSearch = () => {
        filterParams.pageNo = 1
        getList()
    }

    // 重置
    const handleClickReset = () => {
        filterParams = {
            pageNo: 1,
            pageSize: 20
        }
    }

    const clickAudit = (status) => {
        ElMessage.success(status + '成功~')
    }

    let dialogVisible = $ref(false)
    let apply = $ref(null)
    

</script>

<template>
    <div class="top-tabbar-wrap">
        <div 
            class="tabbar-item"
            v-for="(item, index) in tabbarData"
            :key="index"
            :class="{ active: current == index }"
            @click="current = index; getList()"
        >
            {{ item }}
        </div>
    </div>

    <div class="health-search">
        <div class="health-search-form-warp dz-filter-wrap">
            <el-form 
                :model="filterParams" 
                :inline="true"
                :label-width="105"
                class="mt10"
            >
                <el-form-item label="所属市">
                    <el-select v-model="filterParams.sysOrgCode" placeholder=" " clearable @clear="delete filterParams.sysOrgCode">
                        <el-option
                            v-for="(item, index) in sdCityList"
                            :key="index"
                            :label="item"
                            :value="item"
                        >
                            {{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="filterParams.name"></el-input>
                </el-form-item>
                <el-form-item label="人员类别">
                    <el-select v-model="filterParams.s2" placeholder=" " clearable @clear="delete filterParams.s2">
                        <el-option
                            v-for="(item, index) in ['全部', '就业困难的失业人员', '低收入人口']"
                            :key="index"
                            :label="item"
                            :value="item"
                        >
                            {{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="城乡类别">
                    <el-select v-model="filterParams.s1" placeholder=" " clearable @clear="delete filterParams.s1">
                        <el-option
                            v-for="(item, index) in ['全部', '城镇', '乡村']"
                            :key="index"
                            :label="item"
                            :value="item"
                        >
                            {{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>

                <div class="btn-wrap flex-center">
                    <div class="btn reset" @click="handleClickReset">重置</div>
                    <div class="btn search" @click="hadleSearch">查询</div>
                </div>
            </el-form>

        </div>

        <!-- 查询结果 -->
        <div class="search-result mt10" v-loading="dataLoading">
            <div class="result-title flex-between">
                <div>
                    查询结果
                    <span class="result-count">共{{ totalCount }}条</span>
                </div>
            </div>
            
            <el-table 
                :data="resData" 
                style="width: 100%"
                height="530" 
                size="large"
                class="dz-table"
                :scrollbar-always-on="true"
            >
                <el-table-column type="index" label="序号" min-width="60" align="center" />
                <el-table-column prop="s1" label="姓名" min-width="90" align="center" />
                <el-table-column prop="s2" label="身份证号码" min-width="180" />
                <el-table-column prop="s3" label="人员类型" min-width="160" />
                <el-table-column prop="s4" label="单位名称" min-width="160" />
                <el-table-column prop="s5" label="公益性岗位名称" min-width="160" />
                <template v-if="current">
                    <el-table-column prop="s6" label="申请日期" min-width="120" align="center" />
                    <el-table-column prop="s7" label="补贴开始年月" min-width="120" align="center" />
                    <el-table-column prop="s8" label="补贴结束年月" min-width="120" align="center" />
                    <el-table-column prop="s9" label="本月申请次数" min-width="110" align="center" />
                    <el-table-column prop="s10" label="岗位补贴金额" min-width="120" align="center" />
                    <el-table-column prop="s11" label="养老金额" min-width="120" align="center" />
                </template>
                <!-- <el-table-column prop="s12" label="状态" min-width="120" align="center" /> -->
                <!-- <el-table-column prop="s13" label="经办人" min-width="120" align="center" />
                <el-table-column prop="s14" label="办理时间" min-width="120" align="center" /> -->
                <el-table-column prop="s15" label="操作" min-width="120" align="center">
                    <template #default="scope">
                        <div class="table-operation flex-center">
                            <template v-if="tabbarData[current] == '申请中'">
                                <span @click="apply.showDialog(scope.row)">发起申请</span>
                                <el-popconfirm :hide-icon="true" title="是否确认删除?" @confirm="clickAudit('删除')">
                                    <template #reference>
                                        <span>删除</span>
                                    </template>
                                </el-popconfirm>
                            </template>
                            <el-popconfirm :hide-icon="true" title="是否确认通过，将进入下个审批流程?" @confirm="clickAudit('审核')">
                                <template #reference>
                                    <span v-if="tabbarData[current] == '受理中'">审核</span>
                                </template>
                            </el-popconfirm>
                            <el-popconfirm :hide-icon="true" title="是否确认通过，将进入下个拨付流程?" @confirm="clickAudit('审批')">
                                <template #reference>
                                    <span v-if="tabbarData[current] == '审核中'">审批</span>
                                </template>
                            </el-popconfirm>
                            <el-popconfirm :hide-icon="true" title="是否确认拨付?" @confirm="clickAudit('拨付')">
                                <template #reference>
                                    <span v-if="tabbarData[current] == '审批中'">拨付</span>
                                </template>
                            </el-popconfirm>
                            <span v-if="tabbarData[current] == '已拨付'" @click="dialogVisible=true">查看</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination 
                class="mt20" 
                background 
                layout="total, sizes, prev, pager, next" 
                :total="totalCount" 
                :page-size="filterParams.pageSize"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
            />

        </div>
    </div>

    <el-dialog
        v-model="dialogVisible"
        title="查看详情"
        width="578px"
        custom-class="subsidy-info-dialog"
    >
        <div class="table-warp">
            <div class="head item">
                <span>时间轴</span>
                <span>状态</span>
                <span>经办人</span>
                <span>办理时间</span>
            </div>
            <div class="item">
                <span class="timeline">
                    <div class="border">
                        <div class="dot"></div>
                        <div class="line"></div>
                    </div>
                </span>
                <span>受理</span>
                <span>林海</span>
                <span>2022-11-08</span>
            </div>
            <div class="item">
                <span class="timeline">
                    <div class="border">
                        <div class="dot"></div>
                        <div class="line"></div>
                    </div>
                </span>
                <span>审核</span>
                <span>张丽红</span>
                <span>2022-11-11</span>
            </div>
            <div class="item">
                <span class="timeline">
                    <div class="border">
                        <div class="dot"></div>
                        <div class="line"></div>
                    </div>
                </span>
                <span>审批</span>
                <span>刘欢</span>
                <span>2022-11-18</span>
            </div>
            <div class="item">
                <span class="timeline">
                    <div class="border">
                        <div class="dot"></div>
                    </div>
                </span>
                <span>拨付</span>
                <span>李丽华</span>
                <span>2022-11-23</span>
            </div>
        </div>
    </el-dialog>

    <!-- 补贴申请 -->
    <apply ref="apply"></apply>

</template>


<style lang="less">
    .subsidy-info-dialog.el-dialog{
        background: url('../../../assets/images/eleFile/details-bg.png') center no-repeat;
        background-size: 100% 100%;

        .el-dialog__title, .el-dialog__close{
            color: #fff;
        }
        .el-dialog__title{
            margin-left: 10px;   
        }
        
        .table-warp{
            margin: -20px 40px 20px 40px;
            background: rgba(255, 255, 255, .1);
            padding: 23px 16px;

            .item{
                display: flex;
                padding-bottom: 20px;
                color: #fff;

                &.head{
                    color: rgba(255, 255, 255, .6)
                }

                span{
                    text-align: center;
                    flex: 1;
                    position: relative;
                    font-size: 16px;

                    &:last-child{
                        flex: 2;
                    }

                    .border{
                        position: relative;
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                        border: 1px solid #fff;
                        border-radius: 50%;

                        .dot{
                            width: 8px;
                            height: 8px;
                            background: #fff;
                            border-radius: 50%;   
                            margin: 3px;
                        }
                    }

                    .line{
                        position: absolute;
                        top: 16px;
                        left: 6px;
                        width: 1px;
                        height: 20px;
                        background: #fff;
                    }
                }

                &:last-child{
                    padding: 0;
                }
            }

        }
        
    }
</style>